<template>
	<view>
		<view class="userInfo-box">
			<view class="user-item" :style="{top:topHeight +'rpx'}">
				<view class="avatar-box">
					<view class="avatar">
						<image :src="userInfo.avatarUrl || '/static/imgs/usered.png'"></image>
					</view>
					{{userInfo.nickName}}
				</view>
				<view class="arow" @click="toEdit">
					<u-icon name="arrow-right" :label="'完善资料'+( ratio )" labelPos="left" labelSize="13" size="18"></u-icon>
				</view>
			</view>
		</view>
		<view class="oth-item-box">
			<u--form labelPosition="left" class="content">
				<u-form-item leftIcon="order" label="我的发布" :labelWidth="100" borderBottom @click="toMyproj">
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item leftIcon="bookmark" label="我的收藏" :labelWidth="100" borderBottom @click="toCollect">
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item leftIcon="phone" label="联系我们" :labelWidth="100" borderBottom @click="toFeedback">
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item leftIcon="error-circle" label="退出登录" :labelWidth="100" @click="showOutModal">
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</u--form>
		</view>
		<!-- <view class="out-box">退出登录</view> -->
		<u-modal :show="showModal" @confirm="logout" ref="uModal" :asyncClose="true" :closeOnClickOverlay="true"
			showCancelButton @cancel="showModal=false" @close="showModal=false" title='确定要退出登录吗？'
			content="退出登录将无法再使用小程序服务,并退回首页!"></u-modal>
	</view>
</template>

<script>
	import {
		userinfo
	} from "@/common/http.api.js"
	export default {
		data() {
			return {
				topHeight: uni.$topFixedHeight + 20,
				userInfo: {},
				ratio: this.$store.state.ratio,
				showModal: false
			}
		},
		onShow() {
			this.getuserinfo()
		},
		methods: {
			showOutModal() {
				this.showModal = true
			},
			logout() {
				uni.removeStorageSync('token')
				uni.switchTab({
					url: '/pages/index/index'
				})
				this.showModal = false
			},
			toFeedback(){
				uni.navigateTo({
					url: '/pages/feedback/feedback'
				})
			},
			toEdit(){
				uni.navigateTo({
					url: '/pages/editInfo/editInfo'
				})
			},
			toMyproj() {
				uni.navigateTo({
					url: '/pages/myProj/myProj'
				})
			},
			toCollect() {
				uni.navigateTo({
					url: '/pages/collect/collect'
				})
			},
			async getuserinfo() {
				let userId = this.$store.state.userId
				// console.log(this.$store.state);
				const res = await userinfo({
					userId
				})
				this.userInfo = res.data
				this.$store.commit('getUserInfo',this.userInfo)
				// console.log(this.$store.state.userInfo,'this.$store.state.userInfo');
				this.setRatios()
		
			},
			setRatios(){
				let ratio =''
				if(this.userInfo.department == '0'){
					ratio = '30%'
				}else{
					ratio = '60%'
				}
				let count = 0 // 统计完成率
				for(let k in this.userInfo){
					if(this.userInfo[k] || this.userInfo[k] == '0'){ // 包含性别为0
						count++
					}
				}
				// let ratio = ''
				switch(count){
					case 9 :
					ratio = '80%'
					break;
					case 10 :
					ratio = '90%'
					break;
					case 11 :
					ratio = '100%'
					break;
				}
				this.ratio = ratio
				this.$store.commit('setRatio',ratio)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.userInfo-box {
		width: 100%;
		height: 450rpx;
		position: relative;
		background: linear-gradient(to left, #5866f5, #4492f0);

		.user-item {
			padding: 0 40rpx;
			position: absolute;
			background-color: #fff;
			box-shadow: 0 2rpx 28rpx 0 rgba(0, 0, 0, 0.08);
			width: 80%;
			height: 120rpx;
			border-radius: 100rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			justify-content: space-between;
			align-items: center;

			.avatar-box {
				display: flex;
				align-items: center;

				.avatar {
					margin-right: 20rpx;
					width: 90rpx;
					height: 90rpx;
					border-radius: 45rpx;
					background-color: #000;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	.oth-item-box {
		padding: 0 40rpx;
		position: relative;
		background-color: #fff;
		box-shadow: 0 2rpx 28rpx 0 rgba(10, 0, 0, 0.08);
		width: 80%;
		top: -100rpx;
		border-radius: 30rpx;
		left: 50%;
		transform: translateX(-50%);

		/deep/.u-form .u-form-item .u-form-item__body {
			padding: 40rpx 0;
		}
	}

	.out-box {
		padding: 0 40rpx;
		position: relative;
		background-color: #fff;
		box-shadow: 0 2rpx 20rpx 0 rgba(0, 0, 0, 0.08);
		width: 80%;
		height: 110rpx;
		border-radius: 20rpx;
		left: 50%;
		transform: translateX(-50%);
		background-color: #fff;
		color: red;
		font-weight: bold;
		font-size: 16px;
		text-align: center;
		line-height: 120rpx;
	}
</style>
